<template>
  <div class="room-box flex-col-start">
    <div class="room-box-item name">{{apartmentName}}的所有房型</div>
    <div class="room-box-item ">
      <TransButton color="teal" style="width: 200px">只看可选房型</TransButton>
    </div>
    <div class="room-box-item flex-col-start" v-for="room in list">
      <RoomCard :room="room"></RoomCard>
    </div>
  </div>
</template>

<script>
import TransButton from "@/components/button/TransButton.vue";
import RoomCard from "@/components/card/RoomCard.vue";

export default {
  name: "RoomBox",
  components: {RoomCard, TransButton},
  props:{
    apartmentName:{
      type:String
    },
    list:{
      type:Array
    }
  },
  data() {
    return {


    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
  .room-box{

    .name{
      font-size: 23px;
      font-weight: 550;
      color: #4d4d4d;
    }

    .room-box-item{
      width: 100%;
      text-align: left;
      margin: 10px 0;
    }
  }
</style>